@import "vapor";

$nav-link-action-color-light: $grey-800;
$heading-color-light: $grey-900;
$nav-link-color-light: $grey-600;

#theme-switch-icon {
    background-position: center;
    background-color: $nav-link-color-light;
    -webkit-mask-image: url(../../images/sun.svg);
    -webkit-mask-position: center;
    mask-image: url(../../images/sun.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
}

#theme-switch-icon:hover {
    background-color: $nav-link-action-color-light;
}

a:hover {
    .vapor-icon {
        background-color: $nav-link-action-color-light;
    }
}

#vapor-logo {
    background: url(../../images/logo-main-black.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#vapor-logo-footer {
    background: url(../../images/logo-main-black.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar {
    background: linear-gradient(180deg, $grey-100 0%, rgba($grey-100, 0) 100%);
}

body {
    background: white;
    color: $grey-700;
    background-image: url(../../images/main-background-light.jpg);
    background-position: top; 
    background-repeat: no-repeat;
    background-size: 100% 500px;
}

h1 {
    color: $heading-color-light;
}

h2 {
    color: $heading-color-light;
}

h3 {
    color: $heading-color-light;
}

h4 {
    color: $heading-color-light;
}

h5 {
    color: $heading-color-light;
}

h6 {
    color: $heading-color-light;
}

.blog-description {
    color: $grey-700;
}

footer {
    background: $grey-200;
    border-top: 1px solid $grey-300;
    color: $nav-link-color-light;

    li {
        a {
            color: $nav-link-color-light;
        }
        
        a:hover {
            color: $nav-link-action-color-light;
        }
    }

    h6 {
        color: $nav-link-action-color-light;
    }

    .vapor-icon {
        background-color: $nav-link-color-light;
    }
}

hr {
    color: $grey-300;
}

.btn-secondary {
    --#{$prefix}btn-bg: $grey-200;
    --#{$prefix}btn-border-color: 1px solid rgba($pink-300, 0.1);
    background: $grey-200;
    border: 1px solid rgba($pink-300, 0.1);
    --#{$prefix}btn-color: $pink-300;
    color: $pink-300;

    .vapor-icon {
        background-color: $pink-300;
    }
}

.btn-secondary:hover {
    color: $pink-400;
    background: $grey-300;
    --#{$prefix}btn-bg: $grey-300;
    --#{$prefix}btn-border-color: 1px solid rgba($pink-400, 0.1);
    border: 1px solid rgba($pink-400, 0.1);
    .vapor-icon {
        background-color: $pink-400;
    }
}

.btn-primary:hover {
    --#{$prefix}btn-hover-bg: linear-gradient(180deg, $pink-400 0%, $pink-500 100%);
    --#{$prefix}btn-hover-border-color: transparent;
    background: linear-gradient(180deg, $pink-400 0%, $pink-500 100%);
}

.blog-card {
    background: $grey-100;

    .card-title {
        color: $grey-900;
    }

    .card-text {
        color: $grey-700;
    }

    .card-body {
        .blog-post-publish-date {
            color: $grey-700;
        }

        .blog-post-author-name {
            color: $grey-900;
        }
    }
}

.blog-tag-list {
    @include media-breakpoint-up(lg) {
        .tag-list-tag {
            .tag-link {
                color: $grey-700;

                .badge {
                    color: $grey-600;
                    background-color: $grey-200;
                }
            }
        }

        .tag-list-tag {
            .tag-link:hover, .tag-link.active {
                color: $grey-800;
                background-color: $grey-200;

                .badge {
                    background-color: $grey-100;
                }
            }
        }
    }
}

.vapor-molecule {
    background-color: $grey-100;
    border: 1px solid $grey-200;
    color: $grey-600;

    .vapor-icon {
        background-color: $grey-600;
    }
}

.vapor-molecule:active, .vapor-molecule:hover {
    background-color: $grey-200;
    border: 1px solid $grey-300;
    color: $grey-700;

    .vapor-icon {
        background-color: $grey-700;
    }
}

.mobile-drop-down-menu {
    @include media-breakpoint-down(lg) {
        background: $grey-100;
        border: 1px solid $grey-200;

        li a {
            color: $grey-700;
        }

        li a.active, a:hover, li a:active {
            color: $blue-300;
        }
    }
}

code {
    color: $pink-300;
}

.main-page-caption {
    color: $grey-700;
}

.btn-link {
    color: $grey-800;

    a {
        color: $grey-800;
    }

    a:hover {
        color: $grey-900;

        .vapor-icon {
            background-color: $grey-900;
        }
    }
}

.btn-secondary-link {
    color: $grey-600;

    a {
        color: $grey-600;
    }

    a:hover {
        color: $grey-700;

        .vapor-icon {
            background-color: $grey-700;
        }
    }
}

.icon-secondary {
    background-color: $grey-600;
}

#vapor-hero-logo {
    background-image: url(../../images/logo-main-black.svg);
}

.main-site-main-page {
    background-image: url(../../images/main-site-homepage-hero-light.svg);
}

.used-by-caption {
    color: $grey-600;
}

.used-by-icon {
    background-color: $grey-700;
}

.vapor-feature-card {
    background-color: $grey-100;

    .feature-card-icon {
        background-color: $blue-300;
    }
}

.main-site-learn-more-link {
    color: $grey-800;

    .vapor-icon {
        background-color: $grey-800;
    }
}

.main-site-learn-more-link:hover {
    color: $grey-900;

    .vapor-icon {
        background-color: $grey-900;
    }
}